<template>
<div>
  <Card hoverable>
    <span>{{ metricName }}{{ activeKey === '1' ? '在线' : '总' }}用户数</span>

    <div
      :id="metricName"
      class="md:h-4/5 !md:w-full enter-x"
      style="width: 600px; height: 300px"
    ></div>
  </Card>
</div>
</template>

<script lang="ts" setup>
  import * as echarts from 'echarts';
  import { onMounted, watch } from 'vue';
  import { Card } from 'ant-design-vue';

  const props = defineProps({
    metricName: String,
    time: Array,
    value: Array,
    activeKey: String,
  });
  
  onMounted(() => {
    
    let chartDom = document.getElementById(props.metricName as string);
    let myChart = echarts.init(chartDom as HTMLElement);

    let option;
    option = {
      xAxis: {
        type: 'category',
        data: props.time,
      },
      tooltip: {
        trigger: 'axis',
      },
      yAxis: {
        type: 'value',
      },
      series: props.value,
    };
    watch(
      () => props.value,
      () => {
        option.series = props.value;
        option.xAxis.data = props.time;
        option && myChart.setOption(option);
      },
      { immediate: true },
    );
  });
</script>
